<template> 
	<div>
	<nav class="panel column is-12">
  <p class="panel-heading">
    货款申请列表
  </p>
  <div class="panel-block">
    <p class="control has-icons-left">
      <input class="input is-small" type="text" placeholder="search">
      <span class="icon is-small is-left">
        <i class="fa fa-search"></i>
      </span>
    </p>
  </div>
    <table class="table  is-fullwidth  is-narrow is-bordered">
                      <thead >
                          <th><input type="checkbox" v-model="selectAll"></th>
                          <th>姓名</th>
                          <th>身份证</th>
                          <th>手机</th>
                          <th>周期</th>
                          <th>贷款额度</th>
                          <th>地址</th>
                          <th>申请ip</th>
                          <th>申请时间</th> 
                          <th>状态</th>
                          <th>操作</th> 
                      </thead>
                      <tbody>

                      	<tr v-for="item,key in lists">
                      		 
                      			<td style="text-align:center"  >
                      			  <input :name="item.name" type="checkbox" :value="item.name"     v-model="selected" > 
	                      		</td>
	                      		<td>{{item.name}}</td>
	                      		<td>{{item.id_number}}</td>
	                      		<td>{{item.phone}}</td>
	                      		<td>{{item.stage}}</td>
	                      		<td>{{item.prices}}</td>
	                      		<td>{{item.adress}}</td>
	                      		<td>{{item.request_ip}}</td>
	                      		<td>{{item.created_at}}</td>
	                      		<td> 
                      			  <span class="has-text-primary" v-if="item.status === 1">已放款</span>
                      			  <span class="has-text-danger" v-if="item.status === 2">不通过</span>
                      			  <span class="has-text-warning" v-if="item.status === 0">待处理</span>
	                      		</td>
	                      		<td> 
	                      			<a href="#" style="margin-right:3px;" class="has-text-info" @click="openUpdate(key)"><i class="fa fa-edit"></i></a> 
	                      			<a href="#" style="margin-right:3px;" class="has-text-danger"><i class="fa fa-trash"></i></a> 

	                      		</td>  
                      	</tr>
                          

                      </tbody>
      </table>  
  <div class="panel-block">
    <button class="button is-link is-outlined " @click='exEx' v-bind:disabled="condition">
      导出execl
    </button> 
      <p class="button is-link is-outlined is-primary" v-if="emssage" v-html="emssage">{{emssage}}</p>
  </div>
  <div class="panel-bloack"> 
  	<div class="notification" v-if="selected"> 
		 <span class="has-text-danger">已选择 {{ selected }}</span>
	</div>
  </div>
</nav>

<Update :openmodal='updateActive' @closeRequest='close'></Update>

</div>
</template>

<script>

let Update = require('./Update.vue');

	 export default {
	 	components: {Update},
	 	data() {
	 		return {
	 			 lists: {}, 
	 			 updateActive : '',
	 			 temp:'',
	 			selected: [],
		        allSelected: false,
		        itemsNames: [],
		        emssage : '',
		        smssage : '',
		        condition:false
	 		}
	 	},
        mounted() {
            axios.get('/get-info')
			  .then( (response) => {
			  	this.lists = response.data
			    console.log(this.lists);
			  })
			  .catch(function (error) {
			    console.log(error);
			  });
        },
        methods:{
        	 exEx() {
        		if(this.selected != ''){
        			this.condition = true
        			 axios.post('/downloadExcel/xls', {
				    selected: this.selected
				  })
				  .then( (response) => {
				  	this.condition = false
				  	this.emssage = '<a href="'+response.data.path+'" >生成成功!点击下载</a>'
				    console.log(response.data);
				  }) 
        		}
        		else{
        			this.emssage = '没有选择条数'
        		}
        	 },
        	openUpdate(key) {
        		this.$children[0].list = this.lists[key]
        		console.log(this.$children);
				this.updateActive = 'is-active';
        	},
        	close(){
				this.updateActive = ''
			},
        },
       computed: {
        selectAll: {
            get: function () {
                return this.lists ? this.selected.length == this.lists.length : false;
            },
            set: function (value) {
                var selected = [];

                if (value) {
                    this.lists.forEach(function (list) {
                        selected.push(list.name);
                    });

                }

                this.selected = selected;
            }

                   
        }
    }
    }
</script>